<!--
 * @页面名称:档案数量统计
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card filesCount">
    <splitpanes :dbl-click-splitter="false" style="display: flex">
      <pane size="15">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onTreeClick"> </ztree>
      </pane>
      <pane size="85">
        <el-row style="margin-bottom: 10px">
          <el-col :span="6">
            <span style="margin-right: 5px">保管期限:</span>
            <el-select style="width: 60%" v-model="bgqx" @change="onChangeSearch">
              <el-option v-for="item in dictionary.BGQXdata" :key="item.DDL_ID" :label="item.DDL_Name" :value="item.DDL_ID" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <span style="margin-right: 5px">归档方式:</span>
            <el-select style="width: 60%" v-model="FM_ID" @change="onClassChange">
              <el-option v-for="item in classOption" :key="item.FM_ID" :label="item.FM_OCName" :value="item.FM_ID" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <span style="margin-right: 5px">分类:</span>
            <el-tree-select
              class="CatalogSelect"
              check-strictly
              v-model="catalogid"
              :data="catalogList"
              node-key="Catalog_ID"
              :props="{ label: 'Catalog_Name', children: 'children' }"
              :render-after-expand="false"
              @change="onChangeSearch"
            />
          </el-col>
          <el-col :span="5">
            <span style="margin-right: 5px">年份:</span>
            <el-input style="width: 60%" v-model="year" placeholder="请输入年份" @change="onChangeSearch"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="onExport"> 导出 </el-button>
          </el-col>
        </el-row>
        <!-- 统计表格 -->
        <div style="height: calc(100% - 40px)">
          <Stable :columns="tableSetting.columns" :data="tableSetting.data"></Stable>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import Ztree from "@/components/Ztree/Ztree.vue";
import { useDictionryStore } from "@/stores/modules/dictionary";
import { transTree } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();

const dictionryStore = useDictionryStore();
const dictionary = dictionryStore.getDictionaryObj; // 字典数据
const bgqx = ref(undefined); // 保管期限绑定
const FM_ID = ref(undefined); // 归档方式绑定
const catalogid = ref(undefined); // 分类绑定
const year = ref(undefined); // 年份绑定
const classOption: any = ref([]); // 归档方式数据
const catalogList: any = ref([]); // 分类数据
// 表格配置
const tableSetting = reactive({
  columns: [
    // 表格表头
    { title: "门类名称", sortable: true, field: "OCName" },
    { title: "案卷数量", sortable: true, field: "FilesNumber" },
    { title: "文件数量", sortable: true, field: "FileNumber" },
    { title: "页数", sortable: true, field: "PagesNumber" },
    { title: "全文件数", sortable: true, field: "FullTextUnit" },
    { title: "全文容量", sortable: true, field: "FullTextCapacitys" }
  ],
  data: [] as any
});
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  treeNode: {} as any
});
const FileNumberTotal = ref(0); // 所有文件数量
const AccessoryNumberTotal = ref(0); // 所有附件数量
const FilesNumberTotal = ref(0); // 所有案卷数量
const PagesNumberTotal = ref(0); // 所有页数
const FullTextNumberTotal = ref(0); // 所有全文数量
const FullTextUnitTotal = ref(0); // 所有全文件数
// 获取左侧树数据
const getLeftTreeData = () => {
  proxy.$vueAxios.get("MasterPermission/GetUserPermissionFonds").then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// 点击左侧树事件
const onTreeClick = (treeNode: any) => {
  treeSetting.treeNode = treeNode;
  proxy.$vueAxios.get("DynamicStatistics/GetFM", { fondsID: treeNode.Fonds_ID }, { noLoading: true }).then((res: any) => {
    classOption.value = res.List;
  });
  // 置空分类、保管期限、门类以及年份数据
  catalogid.value = undefined;
  FM_ID.value = undefined;
  year.value = undefined;
  bgqx.value = undefined;
  // 调用接口
  onChangeSearch();
};
// 根据选择门类id获取分类
const onClassChange = () => {
  // 获取分类数据
  proxy.$vueAxios.get("Dynamicstatistics/GetCatalog", { fmid: FM_ID.value }).then((res: any) => {
    catalogList.value = transTree(res.List, "Catalog_ID", "Catalog_Father");
  });
  // 置空catalogid
  catalogid.value = undefined;
};
// 根据查询条件的改变触发搜索接口
const onChangeSearch = () => {
  if (Object.keys(treeSetting.treeNode).length > 0) {
    proxy.$showLoading({ tip: "正在加载数据····" });
    proxy.$vueAxios
      .get(
        "DynamicStatistics/GetSaveStatistics",
        {
          fondsid: treeSetting.treeNode.Fonds_ID,
          catalogid: catalogid.value,
          bGQXdata: bgqx.value || undefined,
          year: year.value || undefined
        },
        {
          noLoading: true
        }
      )
      .then((res: any) => {
        if (res.Mark) {
          const list: any[] = [];
          res.List.forEach((item: any) => {
            list.push({ ...item });
          });
          tableSetting.data = list;
          // 调用计算总量函数
          getTotal();
          // 末尾添加一行数据
          tableSetting.data.push({
            OCName: "统计",
            FileNumber: FileNumberTotal.value,
            AccessoryNumber: AccessoryNumberTotal.value,
            FilesNumber: FilesNumberTotal.value,
            PagesNumber: PagesNumberTotal.value,
            FullTextNumber: FullTextNumberTotal.value,
            FullTextUnit: FullTextUnitTotal.value
          });
          proxy.$hideLoading();
        } else {
          proxy.$hideLoading();
        }
      });
  }
};
// 获取所有数据总数
const getTotal = () => {
  FileNumberTotal.value = 0; // 所有文件数量
  AccessoryNumberTotal.value = 0; // 所有附件数量
  FilesNumberTotal.value = 0; // 所有案卷数量
  PagesNumberTotal.value = 0; // 所有页数
  FullTextNumberTotal.value = 0; // 所有全文数量
  FullTextUnitTotal.value = 0; // 所有全文件数
  tableSetting.data.forEach((item: any) => {
    FilesNumberTotal.value += item.FilesNumber;
    FileNumberTotal.value += item.FileNumber;
    AccessoryNumberTotal.value += item.AccessoryNumber;
    PagesNumberTotal.value += item.PagesNumber;
    FullTextNumberTotal.value += item.FullTextNumber;
    FullTextUnitTotal.value += item.FullTextUnit;
  });
};
// 导出
const onExport = () => {};
onMounted(() => {
  getLeftTreeData();
});
</script>

<style scoped lang="scss">
.filesCount {
  height: 100%;
  .CatalogSelect {
    width: 60%;
  }
}
</style>
